<template>
  <!-- 稿件管理 -->
  <h3 style="margin-bottom: 20px; margin-left: 20px">稿件详情管理</h3>
  <!-- 搜索栏 -->
  <nav>
    <!-- 稿件搜索栏 -->
    <div class="periodical-search">
      <el-input
        v-model="periodicalSearch"
        style="width: 240px"
        placeholder="搜索稿件名"
      /><el-button type="primary" plain style="margin-left: 10px"
        >搜索</el-button
      >
    </div>
    <!-- 出版社搜索栏 -->
    <div class="publishing-house">
      <el-input
        v-model="publishingHouseSearch"
        style="width: 240px"
        placeholder="搜索出版社名"
      /><el-button type="success" plain style="margin-left: 10px"
        >搜索</el-button
      >
    </div>
    <!-- 主编搜索栏 -->

    <div class="editor-in-chief">
      <el-input
        v-model="editorInChiefSearch"
        style="width: 240px"
        placeholder="搜索主编名"
      /><el-button type="info" plain style="margin-left: 10px">搜索</el-button>
    </div>
  </nav>
  <el-table :data="journalData" stripe style="width: 100%" fit>
    <el-table-column type="index" width="50" align="center" />
    <el-table-column prop="name" label="稿件名" align="center" />
    <el-table-column prop="competentUnit" label="主管单位" align="center" />
    <el-table-column prop="organizer" label="主办单位" align="center" />
    <el-table-column prop="coOrganizer" label="协办单位" align="center" />
    <el-table-column prop="publishingUnit" label="出版社" align="center" />

    <el-table-column prop="editorInChief" label="主编" align="center" />
    <el-table-column label="操作" align="center" width="360"
      ><template #default="{ row }">
        <el-button type="success" text bg @click="updateEco(row)"
          >更多信息</el-button
        >

        <el-button type="primary" text bg>修改</el-button
        ><el-button type="danger" text bg>删除</el-button></template
      ></el-table-column
    > </el-table
  ><el-pagination background layout="prev, pager, next" :total="1000" />

  <!-- 出版社排名图表 -->
  <el-card style="margin-top: 30px; margin-bottom: 30px"
    ><div id="publishing" style="width: 100%"></div
  ></el-card>

  <!-- 稿件信息管理 -->
  <h3 style="margin-bottom: 20px; margin-left: 20px">稿件信息管理</h3>
  <!-- 搜索栏 -->
  <nav>
    <!-- 稿件搜索栏 -->
    <div class="periodical-search">
      <el-input
        v-model="periodicalSearch"
        style="width: 240px"
        placeholder="搜索稿件名"
      /><el-button type="primary" plain style="margin-left: 10px"
        >搜索</el-button
      >
    </div>
    <!-- 发行单位搜索栏 -->
    <div class="issuing-unit">
      <el-input
        v-model="issuingUnitSearch"
        style="width: 240px"
        placeholder="搜索发行单位"
      /><el-button type="success" plain style="margin-left: 10px"
        >搜索</el-button
      >
    </div>
    <!-- 适读人群搜索栏 -->

    <div class="readability">
      <el-input
        v-model="readabilitySearch"
        style="width: 240px"
        placeholder="搜索适读人群"
      /><el-button type="info" plain style="margin-left: 10px">搜索</el-button>
    </div>
  </nav>

  <el-table :data="messageData" stripe style="width: 100%" fit>
    <el-table-column type="index" width="50" align="center" />
    <el-table-column prop="name" label="稿件名" align="center" />
    <el-table-column
      prop="publicationCoverage"
      label="发行单位"
      align="center"
    />
    <el-table-column prop="readingCrowd" label="适读人群" align="center" />
    <el-table-column prop="price" label="价格" align="center" sortable />
    <el-table-column prop="sales_volume" label="销量" align="center" sortable />

    <el-table-column
      prop="numberOfViews"
      label="浏览次数"
      align="center"
      sortable
    />
    <el-table-column label="操作" align="center" width="360"
      ><template #default="{ row }">
        <el-button style="color: #29b7cb" text bg @click="updateEco(row)"
          >更多信息</el-button
        >

        <el-button style="color: #45b787" text bg>修改</el-button
        ><el-button style="color: #fcc307" text bg>删除</el-button></template
      ></el-table-column
    > </el-table
  ><el-pagination background layout="prev, pager, next" :total="1000" />
</template>

<script setup>
import { onMounted } from "vue";
import { ref } from "vue";
import * as echarts from "echarts";
onMounted(() => {
  var publishing = echarts.init(document.getElementById("publishing"));
  publishing.setOption({
    title: {
      text: "出版社销量排行",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "0%",
      right: "0%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [
          120,
          {
            value: 200,
            itemStyle: {
              color: "#e3b4b8",
            },
          },
          150,
          80,
          70,
          110,
          130,
        ],
        type: "bar",
        barWidth: "37%",
        itemStyle: {
          color: "#5698c3",
        },
      },
    ],
  });

  window.addEventListener("resize", function () {
    publishing.resize();
  });
});

// 稿件数据列表
const journalData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

// 按照稿件名搜索
const periodicalSearch = ref("");
// 按照主编名搜索
const editorInChiefSearch = ref("");
// 按照出版社名搜索
const publishingHouseSearch = ref("");

// 信息数据列表
const messageData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];

// 价格搜索栏
const issuingUnitSearch = ref("");

// 销量搜索栏
const readabilitySearch = ref("");
</script>

<style scoped>
#publishing {
  margin-top: 20px;
  height: 400px;
}
nav {
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子盒子在主轴上均匀分布 */
  align-items: center; /* 子盒子在交叉轴上居中对齐 */
  width: 100%; /* 父盒子的宽度 */
  box-sizing: border-box; /* 确保内边距包含在宽度内 */
}

.periodical-search,
.publishing-house,
.editor-in-chief,
.issuing-unit,
.readability {
  width: 30%; /* 每个子盒子的宽度 */
  height: 100px; /* 每个子盒子的高度 */

  box-sizing: border-box; /* 确保边框包含在宽度内 */
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 子盒子内容在主轴上居中对齐 */
  align-items: center; /* 子盒子内容在交叉轴上居中对齐 */
}

/* el-input表单修饰 */
::v-deep(.el-input__wrapper) {
  width: 300px;
  height: 35px;
  border: #d1d9e6 1px solid;
}
::v-deep(.el-input__wrapper.is-focus) {
  box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
}
.el-button {
  border-radius: 6px;
}
</style>
